<template>
    <div class="practise">
      <div class="header">
        <h2>练习</h2>
      </div>
     
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div class="content">
              <ul>
                <li v-for="(item,index) in List" :key="index">
                    <img :src="item.image" alt="">
                    <span>{{item.title}}</span>
                </li>
              </ul>
              
              <!-- <ul>
                  <li v-for="(item,index) in quesList" :key="index">
                    <div class="imgmain">
                      <img :src="item.image" alt />
                    </div>
                    <p>{{item.title}}</p>
                  </li>
                </ul> -->

               <div class="list">
                 <h3>近期模考</h3>
                 <div class="float">
                   <span  style="color:#EB6100">
                     默认排序
                   </span>
                   <span>
                     时间
                   </span>
                 </div>

                 <div class="empty">
                     <img class="icon" src="../../assets/images/empty@2x.png" alt="">
                     <p class="text">暂无安排，敬请期待</p>
                 </div>
               </div>

          </div>
      </van-pull-refresh>

      <Zhezhao></Zhezhao>
        <Footer></Footer>
    </div>
  </template>
  
  <script>
    import Footer from "../Footer"
    import { PullRefresh } from 'vant';
    import { Toast } from 'vant';
    import Zhezhao from "../zhezhao"
  export default {
    name: 'Practise',
   components:{
       Footer,
       Zhezhao,
       [PullRefresh.name]:PullRefresh,
   },
   data() {
    return {
      isLoading: false,
       List: [
        {
           image: require("../../assets/images/exam-point.png"),
          title: "考点专练"
        },
        {
           image: require("../../assets/images/paper-package.png"),
          title: "套卷练习"
        },
        {
         image: require("../../assets/images/exam.png"),
          title: "仿真模考"
        },
        {
         image: require("../../assets/images/wrong-test.png"),
          title: "错题练习"
        },
        {
          image: require("../../assets/images/assess.png"),
          title: "测评记录"
        },
        {
           image: require("../../assets/images/question-collocet.png"),
          title: "习题收藏"
        }
      ]
    }
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    }
  }
}

  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
  .practise{
    width:100%;
    background:#eee;
  }
  
  .header {
    width: 100%;
    height:40px;
    line-height:40px;
    color: gray;
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  h2 {
    text-align: center;
  }
  .content{
    width:100%;
    height:600px;
  }
  ul{
    width:96%;
    margin: 10px auto;
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  }
  ul li{
    margin: 0.16rem;
    /* border:1px solid #eee; */
    border-radius:50%;
    width:80px;
    height:80px;
    line-height:80px;
  }
  span{
    display: inline-block;
      text-align: center;
  }
  img{ 
    display: inline-block;
    width:20px;
    height:20px;
    line-height:20px;
  }
  .list{
    background:yellow;
    width:96%;
    margin: 10px auto;
    background: white;
  }
  h3{
    line-height:30px;
    margin-left: 10px;
  }
  .float{
    width: 96%;
    height:40px;
    margin: 8px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .empty{
    width:96%;
    height:160px;
    margin: 10px auto;
  }
  .icon ,.text{
    width:98px;
    height:130px;
    margin-left:35%;
    color: gray;
  }
 
  </style>